import { useEffect, useRef, useState } from 'react'
import { showMessage } from '../antd-comp/message'
import './styles.less'

/* 
知识库引用列表
detail: []
file_id: ""
knowledge_name: ""
title: "getWeatherInfo"
type: "plugin"
url: ""
*/
const MessageBs_knowledgeList = ({ list, title = '' }) => {
  const scrollContainerRef = useRef(null)
  /* 下一个next点击 */
  const handleNextClick = () => {
    if (
      scrollContainerRef.current.scrollLeft <
      scrollContainerRef.current.scrollWidth - scrollContainerRef.current.clientWidth
    ) {
      scrollContainerRef.current.scrollBy({ left: 217, behavior: 'smooth' }) // 每个元素的宽度加上右边距
    }
  }
  const [isMkdownReady, setIsMkdownReady] = useState(false)
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsMkdownReady(true)
    }, 2000)
    return () => clearTimeout(timer)
  }, [])
  return (
    <div className="flexCol MessageBs_knowledgeList_case w-[100%]">
      {title && <span className="knowledge_title">{title}</span>}
      {/* title存在 正常显示知识库 插件只有一个 显示在右下角 */}
      {title ? (
        <div className="knowledge_flowX w-[100%]" ref={scrollContainerRef}>
          {list.map((item: any, index) => {
            return (
              <div className="flexRow knowledge_flowX_cont" key={index}>
                <span
                  className="domOverflowEllip_two cursonCase"
                  onClick={() => {
                    if (!item.url) {
                      showMessage({
                        content: '无资源文件链接',
                        type: 'warning'
                      })
                      return
                    }
                    window.open(item.url, '_blank')
                  }}
                >
                  {item.title || item.citation_title}
                </span>
              </div>
            )
          })}
        </div>
      ) : (
        <div className="flex w-full justify-end">
          <div className="text-xs text-gray-500">{list[0].title}</div>
        </div>
      )}
      {scrollContainerRef.current?.scrollLeft ===
      scrollContainerRef.current?.scrollWidth - scrollContainerRef.current?.clientWidth
        ? null
        : title &&
          isMkdownReady && (
            <svg
              className="knowledge_icon cursonCase"
              onClick={() => {
                handleNextClick()
              }}
              width="44"
              height="44"
              viewBox="0 0 44 44"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g filter="url(#filter0_ddd_6762_45052)">
                <circle cx="22" cy="22" r="12" fill="white" />
                <path
                  d="M20 18L24 22L20 26"
                  stroke="black"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </g>
              <defs>
                <filter
                  id="filter0_ddd_6762_45052"
                  x="0"
                  y="0"
                  width="44"
                  height="44"
                  filterUnits="userSpaceOnUse"
                  colorInterpolationFilters="sRGB"
                >
                  <feFlood floodOpacity="0" result="BackgroundImageFix" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feMorphology radius="1" operator="erode" in="SourceAlpha" result="effect1_dropShadow_6762_45052" />
                  <feOffset dy="2" />
                  <feGaussianBlur stdDeviation="2" />
                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6762_45052" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset dy="4" />
                  <feGaussianBlur stdDeviation="2.5" />
                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
                  <feBlend mode="normal" in2="effect1_dropShadow_6762_45052" result="effect2_dropShadow_6762_45052" />
                  <feColorMatrix
                    in="SourceAlpha"
                    type="matrix"
                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha"
                  />
                  <feOffset />
                  <feGaussianBlur stdDeviation="5" />
                  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
                  <feBlend mode="normal" in2="effect2_dropShadow_6762_45052" result="effect3_dropShadow_6762_45052" />
                  <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_6762_45052" result="shape" />
                </filter>
              </defs>
            </svg>
          )}
    </div>
  )
}

export default MessageBs_knowledgeList
